<template>
    <div>
        <div class="tableBox">
            <el-table :span-method="arraySpanMethod" border :data="tableData" class="tems_table" style="width: 100%" @selection-change="tableSelect">
                <el-table-column  type="selection" v-if="tableList.selection" />
                <el-table-column type="index" v-if="tableList.index" width="80" label="序号" />
                <el-table-column v-if="tableList.scope === '0'" label="操作" :width="tableList.width || 250"   >
                    <template slot-scope="scope">
                        <!-- <div class="tems_TableButton" @click="editDirect(scope.row.id, '查看')">查看</div>
                        <div class="tems_TableButton" @click="editDirect(scope.row.id, '编辑')">编辑</div>
                        <div :class="scope.row.status === 0 ? 'tems_TableButton':'tems_TableErrorButton'" @click="stopIt(scope.row)">{{scope.row.status === 0 ? "启用":"停用"}}</div> -->
                        <bt ref="bt" :buttonList="buttonList" :dataId="scope.row.id" @operation="operation"></bt>
                    </template>
                </el-table-column>
                <div v-for="(items, index) in tableList.list"  :key="index" >
                    <el-table-column v-if="!items.hover" :prop="items.tableProp" :label="items.tableName" >
                    </el-table-column>
                    <el-table-column v-else :prop="items.tableProp" :label="items.tableName" >
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="right">
                                <p style="color: #fff">{{scope.row[items.tableProp]}}</p>
                                <div slot="reference" class="tems_popover">
                                    <el-tag class="roadNameInner" size="medium">{{scope.row[items.tableProp]}}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                </div>
            </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination class="cli-pagination" slot="page" background  @current-change="currentPage"  :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="allPageValue"></el-pagination>
    </div>
</template>
<script>

export default {
    name: "tableCommon",
    props: ["tableList", "reFresh", "buttonList"],
    components: {
    },
    model: {
        event: "selectArySlected"
    },
    data() {
        return {
            selection: [],
            RowId: "",
            page: 1,
            list: this.tableList.list,
            // 数据总数
            allPageValue: 0,
            // 当前页面显示数量
            per_page: 10,
            resultArr: [],
            // 表格数据
            tableData: [
                {
                    id: "9",
                    equipmentNumber: "21321231231",
                    intersectionNumber: "21321231231",
                    intersectionName: 1536110434000,
                    administerDepartmentName: "0",
                    equipmentStatus: 1,
                    status: 1
                },{
                    id: "8",
                    equipmentNumber: "21321231231",
                    intersectionNumber: "21321231231",
                    intersectionName: 1536110434000,
                    administerDepartmentName: "0",
                    equipmentStatus: 1,
                    status: 1
                },{
                    id: "7",
                    equipmentNumber: "21321231231",
                    intersectionNumber: "21321231231",
                    intersectionName: 1536110434000,
                    administerDepartmentName: "0",
                    equipmentStatus: 1,
                    status: 1
                },{
                    id: "6",
                    equipmentNumber: "21321231231",
                    intersectionNumber: "21321231231",
                    intersectionName: 1536110434000,
                    administerDepartmentName: "0",
                    equipmentStatus: 1,
                    status: 1
                },{
                    id: "5",
                    equipmentNumber: "21321231231",
                    intersectionNumber: "21321231231",
                    intersectionName: 1536110434000,
                    administerDepartmentName: "0",
                    equipmentStatus: 1,
                    status: 1
                },{
                    id: "4",
                    equipmentNumber: "21321231231",
                    intersectionNumber: "21321231231",
                    intersectionName: 1536110434000,
                    administerDepartmentName: "0",
                    equipmentStatus: 1,
                    status: 1
                },
                {
                    id: "3",
                    equipmentNumber: "21321231231",
                    intersectionNumber: "21321231231",
                    intersectionName: 1536110434000,
                    administerDepartmentName: "0",
                    equipmentStatus: 1,
                    status: 1
                },{
                    id: "2",
                    equipmentNumber: "21321231231",
                    intersectionNumber: "21321231231",
                    intersectionName: 1536110434000,
                    administerDepartmentName: "0",
                    equipmentStatus: 1,
                    status: 1
                },{
                    id: "1",
                    equipmentNumber: "21321231231",
                    intersectionNumber: "21321231231",
                    intersectionName: 1536110434000,
                    administerDepartmentName: "0",
                    equipmentStatus: 1,
                    status: 1
                }
            ],
            btData: ""
        };
    },
    watch: {
        "reFresh": {
            // 监听是否刷新页面（比如编辑保存，创建保存，停用，启用）,变化出发函数重新获取表格数据
            handler: function(val, oldVal) {
                if (val) {
                    this.getPages();
                }
            }
        },
        "tableList.params": {
            // 监听参数是否变化,变化出发函数重新获取表格数据
            handler: function(val, oldVal) {
                this.page = 1;
                this.getPages();
            }
        }
    },
    methods: {
        // 表格移动
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        },
        // 表格选中变化
        tableSelect(selection) {            
            this.selection = selection;
            this.$emit("selectArySlected", this.selection);
        },
        // 切换分页
        currentPage(page) {
            this.page = page;
            this.tableList.params.page = page;
            this.getPages();
        },
        getListValue() {
            let list = this.list;
            let noData = "暂无数据";
            for (let i = 0; i < this.tableData.length; i++) {
                let tableDataU = [];
                let data = this.tableData[i];
                for (let key in Object.keys(data)) {
                    let name = Object.keys(data)[key];
                    data[name] = data[name] === "" ? noData : data[name];
                    tableDataU.push({ name: name });
                }
                for (let j = 0; j < list.length; j++) {
                    let name = list[j].tableProp;
                    let value = !tableDataU.find(t => t.name === name);
                    data[name] = value ? noData : data[name];
                }
            }
        },
        // 获取内容
        getPages() {
            // axios.get(this.tableList.getDataUrl, { params: this.tableList.params }).then((res) => {
            //     this.tableData = res.rows;
            //     let data = res.rows;
            let data = this.tableData;
            let list = this.list;
            for (let j = 0; j < list.length; j++) {
                let prop = list[j].tableProp;
                if (list[j].time) {
                    for (let i = 0; i < data.length; i++) {
                        let tableElement = this.tableData[i][prop];
                        if (tableElement !== "" && tableElement !== undefined && tableElement !== NaN) {
                            let panduan = Number(tableElement);
                            let formatDateTime = this.$filter.formatDateTime(tableElement);
                            let timesFormat = this.$filter.timesFormat(tableElement);
                            this.tableData[i][prop] = panduan ? formatDateTime : timesFormat;
                        } else {
                            this.tableData[i][prop] = "";
                        }
                    }
                }
                let keyValue = list[j].keyChange;
                if (keyValue) {
                    let key = keyValue.name ? keyValue.name : prop;
                    let value = list[j].pand;
                    if (value) {
                        for (let k = 0; k < value.length; k++) {
                            for (let i = 0; i < data.length; i++) {
                                let dataKey = data[i][key];
                                let valueName = value[k][keyValue.keyName];
                                let data0 = this.$filter.stringEvent(dataKey);
                                let data1 = this.$filter.intEvent(dataKey);
                                let valueName0 = this.$filter.stringEvent(valueName);
                                let valueName1 = this.$filter.intEvent(valueName);
                                let pand = (valueName0 === data0 && valueName1 === data1);
                                this.tableData[i][prop] = pand ? value[k][keyValue.keyValue] : this.tableData[i][prop];
                            }
                        }
                    }
                }
            }
            this.getListValue();
            //     this.allPageValue = res.countSize;
            // }).catch((error) => {
            //     this.$showSimpleMessage(error, "error");
            // });
        },
        /**
         * 对应的按钮的操作
         * settimeout里面的函数在执行完相应的操作后执行即可，
         * 如果不需要进行截流，可以不执行ref相关操作
         * 使用截流时，传参必须带有loading
         */
        operation(data) {
            this.$refs.bt.changeStatus(data.Index);
            setTimeout(function(){
                this.$refs.bt.changeStatus(data.Index);
            }.bind(this),2000);
            let parm = {
                id: data.Id,
                title: this.buttonList[data.Index].title
            }
            this.$emit("selectArySlected", parm);
        }
    },
    created() {
        // this.tablejsondata = [...tablejsondata.tableData];
        // let datalength = this.tablejsondata.length; // 总数据长度
        // this.allPageValue = datalength;
        // this.pages = Math.ceil(datalength / 5) // 总共可分几页
        // let num = 1;
        // for (let i = 1; i <= datalength; i++) {
        //     this.tablejsondata[i - 1]["page"] = num;
        //     if (i % 5 === 0) {
        //         num += 1;
        //     }
        // }
        // let data = this.tablejsondata.filter(t => t.page === this.page);
        // this.tableData = data // 默认表格数据经过分页处理
    },
    mounted() {
        this.allPageValue = this.tableData.length;
        this.getPages();
    }
};
</script>

